<template>
    <div class="mask" @click="maskClick" style="align-items: flex-start;z-index: 99" v-show="codeFlag">
        <div class="mask_contentBox hei">
            <div class="header"
                 style="display: flex;justify-content: flex-end;align-items: center;padding-right: 0.3rem;">
                <div class="close_icon" @click="closeMask"></div>
            </div>
            <div class="box">
                <div class="b_t">
                    <span>发送到手机号：{{mobile}}</span>
                    <div :class="isClick?'active':''" v-on:click="getCode">
                        {{clickText}}{{isClick?'s':''}}
                    </div>
                </div>
                <ul class="b_c">
                    <li v-for="disInput in disInputs">
                        <div>{{disInput.value}}</div>
                    </li>
                </ul>
                <div class="password" @click="keyFlag = !keyFlag"
                     style="border:none;display: flex;justify-content: space-around;align-items: center;width:100%;margin: 0 auto;">
                                <span v-for="(v, i) in 6" class="vux-1px-b"
                                      :id="code[i] || code[i] == 0 ? 'shi': ''"
                                     style="width:0.8rem;flex:none;height:100%;">{{code[i]}}</span>
                </div>
                <div class="b_b">
                    <button class="btns" :class="code.length === 6? '': 'disabled'" :disabled="code.length !== 6"
                            v-on:click="nextStep">{{nextText}}
                    </button>
                </div>
            </div>
        </div>
        <div v-show="keyShow" class="password_box" style="position: absolute;background: none;width:100%;height:auto;bottom: 0;left: 0">
            <ul style="box-shadow: 0 -0.02rem 0.1rem rgba(0,0,0,0.05)">
                <li v-for="v in 9" @touchend="keyDown(v)" class="vux-1px-b vux-1px-l">{{v}}</li>
                <li class="vux-1px-r" style="background-color: #eeeeee"></li>
                <li @touchend="keyDown(0)" class="vux-1px-r">0</li>
                <li @touchend="delKey" style="background-color: #eeeeee"><img src="../assets/img/del_key.png" alt="">
                </li>
            </ul>
        </div>

    </div>
</template>
<script>
    export default {
        props:{
            codeFlag:{
                type: Boolean,
                default:false
            },
            mobile:{
                type: String,
                required: true
            },
            nextText:{
                type: String,
                default: '下一步'
            }
        },
        data(){
            return{
                isClick: false,
                clickText: '获取验证码',
                time: null,
                code: '',
                keyShow: true
            }
        },
        activated(){
            this.init()
        },
        deactivated: function(){
            if(this.time){
                clearInterval(this.time)
            }
        },
        methods:{
            init(){
                this.isClick = false
                this.keyShow = true
                this.clickText = '获取验证码'
                this.time = null
                this.code = ''
            },
            getCode() {
                let that = this
                if (!this.isClick) {
                    // 获取验证码
                    this.$ajax.sendCode({mobileNo: this.mobile || null})
                        .then(res => {
                            this.isClick = true
                            var t = 60
                            this.clickText = 60
                            this.time = setInterval(() => {
                                t -= 1
                                this.clickText = t
                                if (t <= 0) {
                                    this.clickText = '重新获取'
                                    this.isClick = false
                                    clearInterval(that.time)
                                }
                            }, 1000)
                        })
                        .catch(()=>this.isClick = false)
                } else {
                    return;
                }
            },
            keyDown(num) {
                this.code += num
                this.code = this.code.slice(0, 6)
            },
            delKey() {
                if (this.code.length) {
                    this.code = this.code.slice(0,this.code.length-1)
                } else {
                    this.code = ''
                }
            },
            maskClick(e){
                if (e.target.className === "mask") {
                    this.keyShow = false;
                } else {
                    this.keyShow = true;
                }
            },
            closeMask(){
                this.$emit('closeMask')
                this.code = ''
            },
            nextStep(){
                this.$emit('nextStep',this.code)
                this.code = ''
            }
        }
    }
</script>
<style lang="less" scoped>
    @import "../pages/wallet/css/common.css";
    @import "../pages/my/css/confirm";
    .password {
        height:1.02rem;
        span{
            flex: 1;
            height: 100%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>
